import { Component, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { ChipItem } from './horizontal-chip-group/horizontal-chip-group.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild('sidenav') sidenav!: MatSidenav;
  title = 'angular-material-app';
  allChips: ChipItem[] = [
    { id: 1, name: 'EDC' },
    { id: 2, name: 'WSS' },
    { id: 3, name: 'EAD-NDC' },
    { id: 4, name: 'EDC CN ONSHORE' },
    { id: 5, name: 'WSS CN ONSHORE' },
    { id: 6, name: 'UIB' }
  ];
  myChips: ChipItem[] = [];

  ngOnInit() {
    const saved = localStorage.getItem('myChips');
    this.myChips = saved ? JSON.parse(saved) : [];
  }

  onChipsChange(chips: any[]) {
    console.log(chips);
    localStorage.setItem('myChips', JSON.stringify(chips));
  }
}
